<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
        <title>SVGs - simple-datatables</title>
        <!-- DataTable Styles -->
        <link rel="stylesheet" href="../dist/css/style.css">
        <!-- Demo Styles -->
        <link rel="stylesheet" href="../demo.css">
        <style>
            table tr td img,
            table tr td svg {
                height: 40px;
                width: 40px;
                margin-right: 10px;
                vertical-align: middle !important;
            }
            table td,
            table th {
                padding: 0px;
                vertical-align: middle !important;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>
                <a href="../../">simple-datatables</a>
            </h1>
            <a href="../../documentation">Documentation</a>
            <a href="../">Demos</a>
        </header>

        <h2>SVGs</h2>

        <table id="demo-table"></table>

        <script type="module">
            import {DataTable} from "../dist/module.js"
            const machineTypeIcons = [
                {
                    name: "Scaler",
                    code: `
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
                            <g>
                                <circle style="fill: #161719" cx="785.77769" cy="2722.76844" r="268.60136"></circle>
                                <circle style="fill: #161719" cx="2469.10822" cy="2722.76844" r="268.60136"></circle>
                                <path style="fill: #161719" d="M2251.275,2358.344l84.69517,77.49579c-136.81895,69.75272-208.755,238.20138-157.11006,395.45748H1180.32648V2722.77233h-91.47229c2.49973-37.17335,3.04367-125.18807-53.35749-200.184-97.91689-130.204-327.57163-168.06721-463.25416-45.80921-92.39766,83.25849-122.98849,224.3304-77.9341,354.51813H308.30695L3.27986,2722.76844,0,2274.86635l494.30844-99.09364H974.518v-95.27894h274.40873v464.96671l232.47924,110.5216h148.64466V2522.58835a308.51381,308.51381,0,0,1-224.86611-99.08556V1821.3276h-27.71758v-64.78546h823.0398l50.7683,22.86406Z"></path>
                                <path style="fill: #161719" d="M2949.91694,2470.68864v145.80768a835.912,835.912,0,0,1-190.5959,0,354.506,354.506,0,0,0-43.88252-81.4244c-21.93965-30.38957-43.31409-56.57044-72.54389-78.072Z"></path>
                                <polygon style="fill: #161719" points="2635.581 2435.222 2835.198 2442.886 2835.198 2404.221 2578.685 2137.947 2463.69 2086.773 2336.401 2094.239 2445.564 2158.615 2635.581 2435.222"></polygon>
                                <path style="fill: #161719" d="M2336.40142,2072.45269l129.307-7.5333,12.72614-47.93921a2850.738,2850.738,0,0,0,251.41867-256.34977c103.6051-119.85624,195.77594-242.92773,267.05627-355.91076-4.77019-15.12349-8.48382-41.31327-13.254-56.43675-132.769,119.47-276.38433,270.86838-411.2717,427.11074C2486.18549,1875.23859,2407.76179,1974.72761,2336.40142,2072.45269Z"></path>
                                <path style="fill: #161719" d="M2996.90949,1344.37959l13.87872,56.7062a2780.44544,2780.44544,0,0,0,355.75215,39.26512c154.17448,6.80751,289.00705-.92231,402.94342-14.83632q62.79871,39.95907,125.59749,79.91808l35.25475-49.58987-138.61139-97.27266q-197.28083-4.55364-394.29408-8.08Q3197.01272,1346.90292,2996.90949,1344.37959Z"></path>
                                <polygon style="fill: #161719" points="3814.13 1363.759 3935.324 1446.735 3977.721 1408.422 3994.045 1297.423 3918.644 1240.77 3844.751 1307.545 3814.13 1363.759"></polygon>
                                <polygon style="fill: #161719" points="3927.275 1232.971 3997.934 1287.42 4043.917 1186.716 3997.88 1156.774 3927.275 1232.971"></polygon>
                                <polygon style="fill: #161719" points="4008.328 1147.333 4012.091 1150.032 4045.861 1174.256 4096 1068.107 4083.109 1053.842 4008.328 1147.333"></polygon>
                                <polygon style="fill: #161719" points="2615.274 2152.28 2645.826 2182.046 2755.502 1803.042 2729.445 1774.208 2695.638 1814.324 2615.274 2152.28"></polygon>
                                <polygon style="fill: #161719" points="2737.71 1766.74 2763.766 1795.575 3100.321 1551.11 3075.851 1524.031 2762.502 1744.336 2737.71 1766.74"></polygon>
                                <polygon style="fill: #161719" points="3081.911 1518.554 3106.382 1545.634 3113.429 1514.669 3096.191 1423.307 3005.284 1405.058 3081.911 1518.554"></polygon>
                                <polygon style="fill: #161719" points="3120.635 1512.862 3115.064 1545.634 3221.779 1508.31 3779.577 1556.298 3746.014 1516.68 3239.037 1465.385 3224.833 1438.593 3171.163 1437.9 3193.652 1474.969 3120.635 1512.862"></polygon>
                                <polygon style="fill: #161719" points="3695.198 1440.88 3783.984 1552.315 3852.852 1490.082 3822.45 1469.729 3778.142 1508.589 3724.937 1437.9 3695.198 1440.88"></polygon>
                            </g>
                        </svg>
                    `
                },
                {
                    name: "LHD",
                    code: `
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
                              <g>
                                  <path style="fill: #161719" d="M7.6719,1680.55315H1365.62666v-222.4898l464.15914,5.754c17.01138,10.6247,41.00986,26.12614,69.04893,46.03243,33.55695,23.82347,50.335,35.7352,62.33556,48.90928,15.001,16.468,39.66629,51.38742,43.15491,117.958l474.22919,4.795L2602.267,1888.65769c-17.64413-1.64918-311.64551-23.97313-490.53244,211.94071-127.22992,167.78946-144.68018,398.22547-44.59451,589.31l-775.35679,1.43848c97.71715-186.724,89.51123-407.95559-23.97514-573.48646-132.97129-193.95184-349.58589-222.61781-381.68529-226.32565-29.43469-3.4-269.50029-26.94769-448.81533,157.27717C233.53713,2258.16209,297.70809,2541.14431,302.087,2559.00384Q151.04307,2507.93671,0,2456.8696,3.8355,2068.71138,7.6719,1680.55315Z"></path>
                                  <circle style="fill: #161719" cx="2539.13189" cy="2427.46008" r="485.41761"></circle>
                                  <path style="fill: #161719" d="M4096,1869.12922c-131.35973,110.16474-277.68138,223.66973-439.59751,336.62659-117.89064,82.23985-232.93911,156.44226-343.76194,223.39176a404.0608,404.0608,0,0,1-232.00285,47.41578q2.16358-24.26489,2.18448-49.10259c0-223.05447-134.32007-414.73426-326.48065-498.56825a403.63466,403.63466,0,0,1,45.65341-81.33756c117.88219-92.5295,253.36605-155.19445,371.24825-247.7322l327.61912,169.279Z"></path>
                                  <circle style="fill: #161719" cx="818.35284" cy="2423.78388" r="485.41761"></circle>
                                  <polygon style="fill: #161719" points="1396.049 1730.479 973.395 1730.479 973.395 1458.063 1365.627 1458.063 1396.049 1730.479"></polygon>
                              </g>
                          </svg>
                    `
                }
            ]

            const getMachineTypeIcon = name => {
                const machineType = machineTypeIcons.find(x => x.name === name)
                if (machineType) {
                    return machineType.code
                }
                return ""
            }

            const generateTable = columns => {
                const tableData = {
                    headings: [],
                    data: []
                }

                columns.forEach(col => tableData.headings.push(col || ""))

                for (let i = 0; i < 100; i++) {
                    const iconId = Math.floor(Math.random() * machineTypeIcons.length)
                    const machineType = machineTypeIcons[iconId].name
                    tableData.data.push([`Machine ${i}`, `${getMachineTypeIcon(machineType)} <span>${machineType}</span>`])
                }
                return tableData
            }

            new DataTable("#demo-table", {
                data: generateTable(["Name", "Type"]),
                searchable: true,
                sortable: true,
                perPage: 15,
                perPageSelect: [5, 10, 15, 20, 25, 50, 100, 250, 500, 1000]
            })
        </script>
    </body>
</html>
